<template>
	<div class="app-content">
		<div class="league-list_box">
			<h3>共有{{ teamTotal }}位成员</h3>
			<div class="list">
				<div v-if="!$util.isEmpty(list.data)" :disabled="!$_isShow()" v-for="(item,index) in list.data"
					:key="index">
					<div class="league-list" @click="goDetail(item)">
						<div class="league-info_box">
							<img :src="item.user_picture" alt="企业logo">
							<div class="league-info_right">
								<h3>{{ item.nick_name }}</h3>
								<div class="des">{{ item.role_name }}</div>
								<div class="des">
									{{ `已服务${$util.isEmpty(item.totalVistor)?0:item.totalVistor}
									名业主 I ${$util.isEmpty(item.working_years)?0:item.working_years}年资质`
									}}
								</div>
							</div>
						</div>
						<div class="league-status_box">
							<span class="item" v-for="(itm,idx) in item.shop_tag_info"
								:key="idx">{{ itm.tag_name }}</span>
						</div>
					</div>
					<button @click="deleteTeam(item)" square type="danger" text="删除"/>
				</div>
				<app-wrapper-empty v-else :is-loading="list.loading" title="暂无成员" type="noData"
					:is-empty="$util.isEmpty(list.data)"/>
			</div>
		</div>
		<uni-popup :class="[!shareStatus?'showWechatShare':'']" ref="popup" maxHeight="100vh" @change="shareBoxFN">
			<div class="share_box" v-if="shareStatus">
				<img v-if="!$util.isEmpty(qrCodeImg)" class="share_img" :src="qrCodeImg">
				<img @click="wechatShare" class="share-weixin_btn"
					 :src="`${constant.imgUrl}center/my-league_share_btn.png`" alt="微信分享按钮">
			</div>
			<img :animation="animationData" v-else class="share_tit"
				 :src="`${constant.imgUrl}center/my-league-wechat_share.png`" alt="分享提示">
		</uni-popup>
		<add-com-icon v-if="$_isShow(owner_user_id)" @add="addRaiders" add-text="邀请团队"/>
	</div>
</template>

<script>
import AppWrapperEmpty from '@/components/App_wrapper_empty'
import AddComIcon from '@/components/module/AddComIcon'
import uniPopup from '@/components/uni-popup/uni-popup'

import { list, share } from '@/mixins'
import { jumpOtherUser, weixinBase64src } from '@/utils/common'

import { getMyLeagueList, getqQrCode, deleteMyLeagueList } from '@/api/center'

export default {
	name: 'LeagueTeamList',
	components: {
		AppWrapperEmpty,
		AddComIcon,
		uniPopup
	},
	mixins: [list, share],
	data() {
		return {
			animationData: {},
			owner_user_id: null,
			constant: this.$constant,
			teamTotal: 0,
			qrCodeImg: '',
			shareStatus: true,
			shareData: null
		}
	},
	onLoad(option) {
		this.option = option
		this.owner_user_id = this.option.owner_user_id
		this.init()
		this.getQrCode()
	},
	onPullDownRefresh() {
		this.init()
	},
	methods: {
		animationFN() {
			let animation = uni.createAnimation({
				transformOrigin: '50% 50%',
				duration: 1000,
				timingFunction: 'ease',
				delay: 0
			})
			animation.top(10).right(10).step()
			this.animationData = animation.export()
		},
		init() {
			getMyLeagueList({
				owner_user_id: this.option.owner_user_id
			}).then((res) => {
				if (res.status === 'success') {
					this.teamTotal = res.data.total
					this.list.data = res.data.list
					if (!this.$util.isEmpty(this.totalPages) && this.totalPages <= this.list.page) {
						this.list.finished = true
					}
				}
			}).then(() => {
				this.$nextTick(() => {
					uni.stopPullDownRefresh()
				})
			})
		},
		deleteTeam(val) {
			let that = this
			uni.showModal({
				title: '提示',
				content: `你确定要删除${val.nick_name}吗？`,
				success: function(res) {
					if (res.confirm) {
						deleteMyLeagueList({
							id: val.id
						}).then((res) => {
							if (res.status === 'success') {
								that.init()
							}
						})
					}
				}
			})
		},
		goDetail(val) {
			jumpOtherUser(val.user_id, val.role_id)
		},

		// ==分享==
		addRaiders() {
			this.$refs.popup.open()
			this.getQrCode()
		},
		getQrCode() {
			let that = this
			getqQrCode({
				owner_user_id: this.option.owner_user_id
			}).then(async(res) => {
				if (res.status === 'success') {
					this.qrCodeImg = res.data.qrcode

					let imgUrl = res.data.qrcode
					// #ifdef  MP-WEIXIN
					imgUrl = await weixinBase64src(res.data.qrcode)
					// #endif

					let params = {
						...res.data,
						title: '邀请团队', // 分享标题
						desc: '邀请团队', // 分享内容
						imgUrl: imgUrl,
						pagePath: `/pages/design/designCompany/indexNew`,
						owner_user_id: this.owner_user_id,
						puser_id: this.owner_user_id
					}
					that.jweixinFn(params)
				}
			})
		},
		wechatShare() {
			this.shareStatus = false
			this.animationFN()
		},
		shareBoxFN(data) {
			if (!data.show) {
				this.shareStatus = !data.show
			}
		}
	}

}
</script>

<style lang="scss" scoped>

	* {
		box-sizing: border-box;
	}

	.league-list_box {
		padding: 20px;

		& > h3 {
			color: #999999;
			font-weight: 400;
			font-size: 24px;
			margin-bottom: 10px;
		}

		& .league-list {
			margin-top:30px;
			background-color: #FFFFFF;
			padding: 5px;
			border-radius: 20px;
			box-shadow: 0px 2px 8px 0px rgba(221, 221, 221, 0.5);

			& .league-info_box {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top:30px;
				margin-left: 30px;

				& > img {
					width: 120px;
					height: 120px;
					background: rgba(255, 255, 255, 1);
					border: 1Px solid rgba(238, 238, 238, 1);
					border-radius: 50%;
				}

				.league-info_right {
					padding-left:40px;
					flex: 1;

					& > h3 {
						color: #333333;
						font-size: 32px;
						font-weight: 600;
					}

					& .des {
						color: #666666;
						font-size: 24px;
						font-weight: 400;
						margin-top: 20px;
					}

					& > .des:nth-of-type(1) {
						margin: 17px 0 24px;
					}
				}

			}

			& .league-status_box {
				margin-top: 30px;

				& .item {
					display: inline-block;
					padding: 6px 12px;
					color: #FF9000;
					font-weight: 400;
					font-size: 24px;
					margin-right: 10px;
					background-color: #FFF6D1;
					margin-bottom: 10px;
				}
			}
		}
	}

	.share_box {
		width: 636px;
		height: 916px;
		margin: 0 auto;
		background: url($imgUrl+ 'center/my-league_share_bg.png') no-repeat;
		background-size: 100%;
		position: relative;

		& .share_img {
			width: 285px;
			height: 285px;
			position: absolute;
			left: 50%;
			top: 201px;
			transform: translate(-50%, 0);
		}

		& .share-weixin_btn {
			width: 489px;
			height: 160px;
			position: absolute;
			left: 50%;
			bottom: 165px;
			transform: translate(-50%, 0);
		}

	}
	.share_tit {
		width: 70px;
		height: 70px;
		position: fixed;
	}

</style>
